<template>
  <el-card class="tab-card">
    <el-tabs v-model="tabActive" @tab-click="handleTabClick">
      <el-tab-pane label="应用" name="app">
        <div class="search">
          <el-form
            :inline="true"
            :model="appTab.form"
            ref="appForm"
            label-width="0"
            class="search-form"
            size="mini"
          >
            <el-form-item>
              <el-input v-model="appTab.form.appName" class="search-input" placeholder="请输入应用名称" @keyup.enter.native="handleSearchApp">
                <el-button
                  size="mini"
                  slot="suffix"
                  @click="handleSearchApp"
                  icon="el-icon-search"
                  type="text"
                ></el-button>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="appTab.tableData" size="mini" border v-loading="appTab.tableLoading">
          <el-table-column
            v-for="item in appTab.columns"
            :prop="item.prop"
            :label="item.label"
            :min-width="item.width"
            :show-overflow-tooltip="true"
            :key="item.prop"
          >
            <template slot-scope="scope">
              <span v-if="item.prop === 'appType'">{{$appTypeObj[scope.row[item.prop]] || "--"}}</span>
              <!--							<span v-else-if="item.prop === 'eventNum'">-->
              <!--								{{(scope.row["eventNum"] === 0 ? 0 : ( scope.row["eventNum"] || "&#45;&#45;")) + -->
              <!--								'/' + (scope.row["eventCollectedNum"] === 0 ? 0 : (scope.row["eventCollectedNum"] || "&#45;&#45;"))}}-->
              <!--							</span>-->
              <span v-else>{{scope.row[item.prop] || "--"}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button size="mini" type="text" @click="handleGotoBizList(scope)">查看栏目</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeApp"
          @current-change="handleCurrentApp"
          :current-page="appTab.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="appTab.pageSize"
          background
          layout="total, prev, pager, next, sizes, jumper"
          :total="appTab.total"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="栏目" name="biz">
        <div class="search">
          <el-form
            :inline="true"
            size="mini"
            :model="bizTab.form"
            ref="appForm"
            label-width="0"
            class="search-form"
          >
            <el-form-item>
              <el-select v-model="bizTab.form.appId" multiple clearable placeholder="请选择应用">
                <el-option
                  v-for="item in appSelectList"
                  :value="item.appId"
                  :label="item.appName"
                  :key="item.appId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="bizTab.form.orgCode" multiple clearable placeholder="请选择集团/省份">
                <el-option
                  v-for="(value, key) in orgCodeObj"
                  :key="key"
                  :label="value"
                  :value="key"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="bizTab.form.bizSubTypeCode"
                multiple
                clearable
                placeholder="请选择栏目大类"
              >
                <el-option
                  v-for="(value, key) in bizTypeObj"
                  :value="key"
                  :label="value"
                  :key="key"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="输入栏目名称" v-model="bizTab.form.bizName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearchBiz">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="bizTab.tableData" size="mini" border v-loading="bizTab.tableLoading">
          <el-table-column
            v-for="item in bizTab.columns"
            :prop="item.prop"
            :label="item.label"
            :min-width="item.width"
            :show-overflow-tooltip="true"
            :key="item.prop"
          >
            <template slot-scope="scope">
              <span
                v-if="item.prop === 'eventNum'"
              >{{(scope.row["eventNum"] === 0 ? 0 : ( scope.row["eventNum"] || "--")) + '/' + (scope.row["eventCollectedNum"] === 0 ? 0 : (scope.row["eventCollectedNum"] || "--"))}}</span>
              <span v-else>{{scope.row[item.prop] || "--"}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button size="mini" type="text" @click="handleBizDetail(scope, 'biz')">详情</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeBusiness"
          @current-change="handleCurrentBusiness"
          :current-page="bizTab.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="bizTab.pageSize"
          background
          layout="total, prev, pager, next, sizes, jumper"
          :total="bizTab.total"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="位置" name="page">
        <div class="search">
          <el-form
            :inline="true"
            size="mini"
            :model="pageTab.form"
            ref="pageForm"
            label-width="0"
            class="search-form search-form-mini"
          >
            <el-form-item>
              <el-select v-model="pageTab.form.appId" multiple clearable placeholder="请选择应用">
                <el-option
                  v-for="item in appSelectList"
                  :value="item.appId"
                  :label="item.appName"
                  :key="item.appId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="pageTab.form.bizId" multiple clearable placeholder="选择栏目">
                <el-option
                  v-for="item in bizSelectList"
                  :value="item.bizId"
                  :label="item.bizName"
                  :key="item.bizId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="pageTab.form.pageType" multiple clearable placeholder="位置类型">
                <el-option
                  v-for="(label, value) in $pageTypeObj"
                  :value="value"
                  :label="label"
                  :key="value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="pageTab.form.productCode"
                multiple
                clearable
                placeholder="SDK产品编码"
              >
                <el-option
                  v-for="(item) in $productCodeList"
                  :value="item.value"
                  :label="item.label"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="pageTab.form.sdkType" multiple clearable placeholder="SDK类型">
                <el-option
                  v-for="(label, value) in $sdkTypeObj"
                  :value="value"
                  :label="label"
                  :key="value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="pageTab.form.requirementType"
                multiple
                clearable
                placeholder="更新状态"
              >
                <el-option
                  v-for="(label, value) in $requirementTypeObj"
                  :value="value"
                  :label="label"
                  :key="value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="pageTab.form.orgCode" multiple clearable placeholder="集团/省份">
                <el-option
                  v-for="(label, value) in orgCodeObj"
                  :value="value"
                  :label="label"
                  :key="value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="输入位置名称" v-model="pageTab.form.pageName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearchPage">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          :data="pageTab.tableData"
          size="mini"
          border
          row-key="id"
          lazy
          :load="handleLoadPage"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          v-loading="pageTab.tableLoading"
        >
          <el-table-column
            v-for="item in pageTab.columns"
            :prop="item.prop"
            :label="item.label"
            :min-width="item.width"
            :show-overflow-tooltip="true"
            :sortable="item.sortable"
            :key="item.prop"
          >
            <template slot-scope="scope">
              <span
                v-if="item.prop==='requirementType'"
                :class="'requirement-type-'+scope.row[item.prop]"
              >{{$handleRequirementType(scope.row[item.prop]) || "--"}}</span>
              <span
                v-else-if="item.prop === 'pageType'"
              >{{$pageTypeObj[scope.row[item.prop]] || "--"}}</span>
              <span
                v-else-if="item.prop === 'sdkType'"
              >{{$sdkTypeObj[scope.row[item.prop]] || "--"}}</span>
							<span
								v-else-if="item.prop === 'productCode'"
							>{{$productCodeObj[scope.row[item.prop]] || "--"}}</span>
              <span
                v-else-if="item.prop === 'eventNum'"
              >{{(scope.row["eventNum"] === 0 ? 0 : ( scope.row["eventNum"] || "--")) + '/' + (scope.row["eventCollectedNum"] === 0 ? 0 : (scope.row["eventCollectedNum"] || "--"))}}</span>
              <span v-else>{{scope.row[item.prop] || "--"}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button size="mini" type="text" @click="handleBizDetail(scope, 'page')">详情</el-button>
                <el-button
                  v-if="scope.row.pageType === 1"
                  size="mini"
                  type="text"
                  @click="handlePageStatistic(scope)"
                >统计</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizePage"
          @current-change="handleCurrentPage"
          :current-page="pageTab.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="pageTab.pageSize"
          background
          layout="total, prev, pager, next, sizes, jumper"
          :total="pageTab.total"
        ></el-pagination>
        <el-drawer
          class="flex-el-drawer"
          size="60%"
          direction="rtl"
          :with-header="false"
          :visible.sync="pageTab.drawer.visible"
        >
          <div class="el-drawer__header">
            <div>
              <span>{{pageTab.drawer.title}}</span>
            </div>
            <button class="el-drawer__close-btn" @click="handlePageStatisticClose">
              <el-icon class="el-icon-close"></el-icon>
            </button>
          </div>
          <div class="el-drawer-content">
            <event-statistic :info="pageTab.drawer.info"></event-statistic>
          </div>
          <div class="el-drawer-footer">
            <el-button size="mini" type="primary" @click="handlePageStatisticClose">关闭</el-button>
          </div>
        </el-drawer>
      </el-tab-pane>
      <el-tab-pane label="埋点" name="bury">
        <div class="search">
          <el-form
            :inline="true"
            size="mini"
            :model="eventTab.form"
            ref="buryForm"
            label-width="0"
            class="search-form search-form-mini"
          >
            <el-form-item>
              <el-select v-model="eventTab.form.appId" multiple clearable placeholder="选择应用">
                <el-option
                  v-for="item in appSelectList"
                  :value="item.appId"
                  :label="item.appName"
                  :key="item.appId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="eventTab.form.bizId" multiple clearable placeholder="选择栏目">
                <el-option
                  v-for="item in bizSelectList"
                  :value="item.bizId"
                  :label="item.bizName"
                  :key="item.bizId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="eventTab.form.eventId" multiple clearable placeholder="选择事件类型">
                <el-option
                  v-for="item in eventTypeList"
                  :value="item.eventId"
                  :label="item.eventName"
                  :key="item.eventId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="eventTab.form.requirementType"
                multiple
                clearable
                placeholder="选择更新状态"
              >
                <el-option
                  v-for="(label, value) in $requirementTypeObj"
                  :value="value"
                  :label="label"
                  :key="value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="eventTab.form.sdkType" clearable placeholder="SDK类型">
                <el-option
                  v-for="(label, value) in $sdkTypeObj"
                  :value="value"
                  :label="label"
                  :key="value"
                ></el-option>
              </el-select>
            </el-form-item>
						<el-form-item>
							<el-select v-model="eventTab.form.dataStatus" clearable placeholder="采集状态">
								<el-option
									v-for="(label, value) in $eventDataStatus"
									:value="value"
									:label="label"
									:key="value"
								></el-option>
							</el-select>
						</el-form-item>
            <el-form-item>
              <el-select v-model="eventTab.form.orgCode" multiple clearable placeholder="选择集团/省份">
                <el-option
                  v-for="(label, value) in orgCodeObj"
                  :value="value"
                  :label="label"
                  :key="value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="输入埋点名称" v-model="eventTab.form.trackName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearchEvent">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="eventTab.tableData" size="mini" border v-loading="eventTab.tableLoading">
          <el-table-column
            v-for="item in eventTab.columns"
            :prop="item.prop"
            :label="item.label"
            :min-width="item.width"
            :show-overflow-tooltip="true"
            :sortable="item.sortable"
            :key="item.prop"
          >
            <template slot-scope="scope">
              <span
                v-if="item.prop === 'requirementType'"
                :class="'requirement-type-'+scope.row.dataStatus"
              >{{$handleRequirementType(scope.row[item.prop]) || "--"}}</span>
              <div
								style="text-align: center"
                v-else-if="item.prop === 'dataStatus'"
              >
								<el-tag
									size="mini"
									v-if="handleStatus(scope.row[item.prop]).type"
									:type="handleStatus(scope.row[item.prop]).type"
									effect="dark">
									{{ handleStatus(scope.row[item.prop]).val }}
								</el-tag>
								<span v-else>
									{{ handleStatus(scope.row[item.prop]).val }}
								</span>
							</div>
							<span
								v-else-if="item.prop === 'sdkType'"
							>{{$sdkTypeObj[scope.row[item.prop]] || "--"}}</span>
							<span
								v-else-if="item.prop === 'hitCount'"
							>{{handleCount(scope).hitCount}}</span>
							<span
								v-else-if="item.prop === 'userCount'"
							>{{handleCount(scope).userCount}}</span>
              <span v-else>{{scope.row[item.prop] || "--"}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button size="mini" type="text" @click="handleBuryDetail(scope)">详情</el-button>
                <el-button size="mini" type="text" :disabled="scope.row['dataStatus'] == 0" @click="handleBuryStatistic(scope)">统计</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeBury"
          @current-change="handleCurrentBury"
          :current-page="eventTab.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="eventTab.pageSize"
          background
          layout="total, prev, pager, next, sizes, jumper"
          :total="eventTab.total"
        ></el-pagination>
        <!--查看埋点-->
        <el-drawer
          class="flex-el-drawer"
          size="60%"
          direction="rtl"
          :with-header="false"
          :visible.sync="eventTab.detailDrawer.visible"
        >
          <div class="el-drawer__header">
            <div>
              <span>{{eventTab.detailDrawer.title}}</span>
            </div>
            <button class="el-drawer__close-btn" @click="handleBuryDetailClose">
              <el-icon class="el-icon-close"></el-icon>
            </button>
          </div>
          <div class="el-drawer-content">
            <bury-detail :trackDbId="eventTab.detailDrawer.trackDbId"></bury-detail>
          </div>
          <div class="el-drawer-footer">
            <el-button size="mini" type="primary" @click="handleBuryDetailClose">关闭</el-button>
          </div>
        </el-drawer>
        <!--事件统计-->
        <el-drawer
          class="flex-el-drawer"
          size="60%"
          direction="rtl"
          :with-header="false"
          :visible.sync="eventTab.drawer.visible"
        >
          <div class="el-drawer__header">
            <div>
              <span>{{eventTab.drawer.title}}</span>
            </div>
            <button class="el-drawer__close-btn" @click="handleBuryStatisticClose">
              <el-icon class="el-icon-close"></el-icon>
            </button>
          </div>
          <div class="el-drawer-content">
            <event-statistic :info="eventTab.drawer.info"></event-statistic>
          </div>
          <div class="el-drawer-footer">
            <el-button size="mini" type="primary" @click="handleBuryStatisticClose">关闭</el-button>
          </div>
        </el-drawer>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import eventStatistic from "./eventStatistic";
import buryDetail from "./buryDetailDialog";

export default {
  name: "monitorList",
  data() {
    return {
      tabActive: "app",
			trackType: "track",
			type_page: "page",
			trackInfo: {

			},
      appTab: {
        form: {
          appName: ""
        },
        currentPage: 1,
        pageSize: 10,
        total: 0,
        columns: [
          {
            prop: "appId",
            label: "应用ID",
            width: 80
          },
          {
            prop: "appName",
            label: "应用名称",
            width: 100
          },
          {
            prop: "appType",
            label: "应用类型",
            width: 80
          },
          {
            prop: "orgName",
            label: "运营部门",
            width: 80
          },
          {
            prop: "totalEvents",
            label: "总事件数/总采集数",
            width: 100
          },
          {
            prop: "appDescribe",
            label: "说明",
            width: 80
          }
        ],
        tableData: [],
        tableLoading: false
      },
      bizTab: {
        form: {
          appId: [],
          orgCode: [],
          bizSubTypeCode: [],
          bizName: ""
        },
        currentPage: 1,
        pageSize: 10,
        total: 0,
        columns: [
          {
            prop: "bizId",
            label: "栏目ID",
            width: 80
          },
          {
            prop: "bizName",
            label: "栏目名称",
            width: 100
          },
          {
            prop: "orgName",
            label: "集团/省份",
            width: 80
          },
          {
            prop: "appName",
            label: "应用",
            width: 80
          },
          {
            prop: "bizSubTypeValue",
            label: "栏目大类",
            width: 80
          },
          {
            prop: "eventNum",
            label: "总事件数/总采集数",
            width: 80
          }
        ],
        tableData: [],
        tableLoading: false
      },
      pageTab: {
        form: {
          appId: [],
          bizId: [],
          pageType: [],
          productCode: [],
          sdkType: [],
          requirementType: [],
          orgCode: [],
          pageName: ""
        },
        currentPage: 1,
        pageSize: 10,
        total: 0,
        columns: [
          {
            prop: "bizName",
            label: "栏目",
            width: 80
          },
          {
            prop: "pageId",
            label: "位置标识",
            width: 100
          },
          {
            prop: "pageName",
            label: "位置名称",
            width: 80
          },
          {
            prop: "pageType",
            label: "位置类型",
            width: 80
          },
          {
            prop: "productCode",
            label: "SDK产品编码",
            width: 80
          },
          {
            prop: "sdkType",
            label: "SDK类型",
            width: 80
          },
          {
            prop: "requirementType",
            label: "最近更新状态",
            width: 80
          },
          {
            prop: "version",
            label: "最近更新版本",
            width: 80
          },
          {
            prop: "eventNum",
            label: "总事件数/总采集数",
            width: 100
          }
        ],
        tableData: [],
        tableLoading: false,
        drawer: {
          visible: false,
          title: "事件访问统计",
          pageStatisticsId: null,
					info: {
						id: null,
						type: 'page'
					}
        }
      },
      eventTab: {
        form: {
					dataStatus: "",
          appId: [],
          bizId: [],
          eventId: [],
          sdkType: "",
          requirementType: [],
          orgCode: [],
          trackName: "",
					trackListLocation: true
        },
        currentPage: 1,
        pageSize: 10,
        total: 0,
        columns: [
          {
            prop: "bizName",
            label: "栏目",
            width: 80,
            tooltip: true,
            sortable: true
          },
          {
            prop: "trackName",
            label: "埋点名称",
            width: 150,
            tooltip: true,
            sortable: false
          },
          {
            prop: "trackId",
            label: "埋点标识",
            width: 80,
            tooltip: true,
            sortable: false
          },
          {
            prop: "eventName",
            label: "事件类型",
            width: 80,
            tooltip: true,
            sortable: false
          },
          {
            prop: "dataStatus",
            label: "采集状态",
            width: 80,
            tooltip: true,
            sortable: false
          },
					{
						prop: "sdkType",
						label: "SDK类型",
						width: 80,
						tooltip: true,
						sortable: false
					},
          {
            prop: "hitCount",
            label: "事件点击量",
            width: 90,
            tooltip: true,
            sortable: false
          },
          {
            prop: "userCount",
            label: "事件用户量",
            width: 90,
            tooltip: true,
            sortable: false
          },
          {
            prop: "requirementType",
            label: "最近更新状态",
            width: 100,
            tooltip: true,
            sortable: false
          },
          {
            prop: "version",
            label: "最近更新版本",
            width: 100,
            tooltip: true,
            sortable: false
          }
        ],
        tableData: [],
        tableLoading: false,
        drawer: {
          visible: false,
          title: "事件访问统计",
          trackId: null,
          eventRow: {},
					info: {
          	id: null,
						type: 'track'
					}
        },
        detailDrawer: {
          visible: false,
          title: "查看埋点",
          trackId: null
        }
      }
    };
  },
  components: {
    eventStatistic,
    buryDetail
  },
  computed: {
    bizSelectList() {
      return this.$store.state.publicData.bizSelectList;
    },
    appSelectList() {
      return this.$store.state.publicData.appSelectList;
    },
    orgCodeObj() {
      return this.$store.state.publicData.orgCodeObj;
    },
    bizTypeObj() {
      return this.$store.state.publicData.businessTypeObj;
    },
    eventTypeList() {
      return this.$store.state.publicData.eventTypeList;
    }
  },
  created() {
    this.tabActive = this.$store.state.buryMonitor.tabActive
      ? this.$store.state.buryMonitor.tabActive
      : "app";
    this.$store.dispatch("getOrgList");
    this.$store.dispatch("getBusinessTypeList");
    this.$store.dispatch("getEventTypeList", { commonType: 2 });
    this.$store.dispatch("getAppSelectList");
    this.$store.dispatch("getBizSelectList", {
      hasEventCollectData: false,
      needSimpleData: true
    });
    this.handleQueryAppData();
    this.handleQueryBizData();
    this.handleQueryPageData();
    this.handleQueryEventData();
  },
  methods: {
  	// 处理采集状态
		handleStatus(status) {
			let type = "", val = "";
			console.log(status === null || status === undefined || status === '', "dataStatus");
			if (status === null || status === undefined || status === '') {
				val = "--";
			} else if (status == 0) {
				console.log(status, "dataStatus1");
				type = "danger";
				val = this.$eventDataStatus[status];
			} else if (status == 1) {
				type = "success";
				val = this.$eventDataStatus[status];
			}
			return {
				type,
				val
			};
		},
  	// 处理数值
		handleCount(scope) {
			let {hitCount, userCount} = scope.row;
			if (status == 1) {
				hitCount = hitCount || 0;
				userCount = userCount || 0;
			} else {
				hitCount = (hitCount || hitCount == '0') ? hitCount : "--";
				userCount = (userCount || userCount == '0') ? userCount : "--";
			}
			return {
				hitCount,
				userCount
			};
		},
    // 切换tab
    handleTabClick(val) {
      console.log(val);
    },
    /*应用*/
    async handleQueryAppData() {
      this.appTab.tableLoading = true;
      try {
        let { currentPage, pageSize, form } = this.appTab;
        let data = {
          currentPage,
          pageSize,
          appName: form.appName || ""
        };
        let res = await this.$applicationApi.app_event_list(data);
        if (res) {
          let { list, total } = res.value;
          this.appTab.tableData = list;
          this.appTab.total = total;
        }
        this.appTab.tableLoading = false;
      } catch (err) {
        this.appTab.tableLoading = false;
      }
    },
    handleSearchApp() {
    	this.appTab.currentPage = 1;
    	this.handleQueryAppData();
		},
    handleSizeApp(pageSize) {
      this.appTab.currentPage = 1;
      this.appTab.pageSize = pageSize;
      this.handleQueryAppData();
    },
    handleCurrentApp(page) {
      this.appTab.currentPage = page;
      this.handleQueryAppData();
    },
    // 跳转栏目
    handleGotoBizList(scope) {
      let { appId } = scope.row;
      this.bizTab.form.appId = [appId];
      this.tabActive = "biz";
      this.handleSearchBiz();
    },
    /*栏目*/
    handleSearchBiz() {
      this.bizTab.currentPage = 1;
      this.handleQueryBizData();
    },
    // 查询栏目数据
    async handleQueryBizData() {
      this.bizTab.tableLoading = true;
      let { currentPage, pageSize, form } = this.bizTab;
      let data = {
        hasEventCollectData: true,
        needSimpleData: null,
        currentPage,
        pageSize,
        ...form
      };
      let res = await this.$applicationApi.biz_list(data);
      if (res) {
        let { list, total } = res.value;
        this.bizTab.tableData = list;
        this.bizTab.total = total;
      }
      this.bizTab.tableLoading = false;
    },
    handleSizeBusiness(pageSize) {
      this.bizTab.currentPage = 1;
      this.bizTab.pageSize = pageSize;
      this.handleQueryBizData();
    },
    handleCurrentBusiness(page) {
      this.bizTab.currentPage = page;
      this.handleQueryBizData();
    },
    // 跳转栏目详情页
    handleBizDetail(scope, type) {
      let id;
      if (type === "biz") {
		id = scope.row.id;
		this.$store.commit("tabActiveChange", 'biz'); //  更改tab标签
      } else if (type === "page") {
		id = scope.row.id;
		this.$store.commit("tabActiveChange", 'page'); //  更改tab标签
      }
      this.$router.push({
        path: `/buryMonitor/businessDetail/${type}/${escape(id)}`
      });
    },
    /*位置*/
    // 位置展开，load数据
    async handleLoadPage(tree, treeNode, resolve) {
      let { id, level } = tree;
      level = level + 1;
      if (level <= 3) {
        let data = {
          parentId: id,
          currentPage: 1,
          pageSize: 10000,
          level: level,
          requirementId: this.requirementId
        };
        let res = await this.$pageApi.pageList(data);
        if (res) {
          let { list } = res.value;
          if (level < 3) {
            list.forEach(item => {
              item.hasChildren = true;
            });
          }
          resolve(list);
        }
      } else {
        resolve([]);
      }
    },
    // 点击位置查询按钮
    handleSearchPage() {
      this.pageTab.currentPage = 1;
      this.handleQueryPageData();
    },
    // 查询数据
    async handleQueryPageData() {
      this.pageTab.tableLoading = true;
      try {
        let { currentPage, pageSize, form } = this.pageTab;
        let requirementType = form.requirementType.slice();
				let _index = requirementType.indexOf("3");
				if (_index > -1) {
					requirementType.splice(_index+1, 0, "4");
				}
        let data = {
          hasMonitorData: true,
          level: 1,
          currentPage,
          pageSize,
          ...form,
					requirementType
        };
        let res = await this.$pageApi.pageList(data);
        if (res) {
          let { list, total } = res.value;
          if (form.pageType.length === 0) {
            list.forEach(item => {
              item.hasChildren = true;
            });
          }
          this.pageTab.tableData = list;
          this.pageTab.total = total;
        }
        this.pageTab.tableLoading = false;
      } catch (e) {
        this.pageTab.tableLoading = false;
      }
    },
    handleSizePage(pageSize) {
      this.pageTab.currentPage = 1;
      this.pageTab.pageSize = pageSize;
      this.handleQueryPageData();
    },
    handleCurrentPage(page) {
      this.pageTab.currentPage = page;
      this.handleQueryPageData();
    },
    // 页面访问统计
    handlePageStatistic(scope) {
      let { pageId } = scope.row;
      this.pageTab.drawer.info = {
      	id: pageId,
				type: "page"
			};
      this.pageTab.drawer.visible = true;
    },
    handlePageStatisticClose() {
      this.pageTab.drawer.visible = false;
    },
    /*
     * 埋点
     * */
    // 点击查询
    handleSearchEvent() {
      this.eventTab.currentPage = 1;
      this.handleQueryEventData();
    },
    // 列表
    async handleQueryEventData() {
      this.eventTab.tableLoading = true;
      try {
        let { currentPage, pageSize, form } = this.eventTab;
				let requirementType = form.requirementType.slice();
				let _index = requirementType.indexOf("3");
				if (_index > -1) {
					requirementType.splice(_index+1, 0, "4");
				}
        let data = {
          currentPage,
          pageSize,
          ...form,
					requirementType
        };
        let res = await this.$eventApi.eventList(data);
        if (res) {
          let { list, total } = res.value;
          this.eventTab.tableData = list;
          this.eventTab.total = total;
        }
        /*
          测试数据
          this.eventTab.tableData = [
              {
                  id: 1,
                  trackId: "asdasd"
              }
          ];
          this.eventTab.total = 1;*/
        this.eventTab.tableLoading = false;
      } catch (e) {
        this.eventTab.tableLoading = false;
      }
    },
    // 详情
    handleBuryDetail(scope) {
      this.eventTab.detailDrawer.trackDbId = scope.row.id;
      this.eventTab.detailDrawer.visible = true;
    },
    handleBuryDetailClose() {
      this.eventTab.detailDrawer.visible = false;
    },
    handleSizeBury(pageSize) {
      this.eventTab.currentPage = 1;
      this.eventTab.pageSize = pageSize;
      this.handleQueryEventData();
    },
    handleCurrentBury(page) {
      this.eventTab.currentPage = page;
      this.handleQueryEventData();
    },
    // 事件访问统计
    handleBuryStatistic(scope) {
      let { trackId } = scope.row;
      this.eventTab.drawer.info = {
      	id: trackId,
				type: "track"
			};
      this.eventTab.drawer.visible = true;
    },
    handleBuryStatisticClose() {
      this.eventTab.drawer.visible = false;
    }
  }
};
</script>

<style lang="scss">
.search-form-mini {
  .el-input--mini .el-input__inner {
    width: 120px;
  }
}
</style>
